<template>
  <div>
    <!-- ------------轮播图------------------ -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div class="swiper">
          <img :src="image.pic" />
          <!-- <img v-lazy="image.pic" src=""/> -->
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="re_music_list_top">
      <p class="text">推荐歌单</p>
    </div>
    <div v-if="!show" class="loading">
            <img src="../assets/images/loading.gif" alt="">
    </div>
    <div v-else class="re_music_list">
      <div class="total" v-for="(item, index) in musicData" :key="index" @click="toMusic(item.id)">
        <div class="img_num">
          <img :src="item.picUrl" alt />
          <span>
            <i>
              <img src="../assets/images/earphone.png" alt />
            </i>
            {{num[index]}}
          </span>
        </div>
        <p class="text">{{item.name}}</p>
      </div>
    </div>
    <div>
      <div class="re_music_list_bottom">
        <p>最新音乐</p>
      </div>
      <div class="songs-list-box">
        <div class="songs-list" @click="toplay(idx)" v-for="(item, idx) in songlist" :key="idx">
          <div class="songs-list-left">
            <h3>
              {{ item.song.name}}
              <span v-if="item.song.alias.length>0">({{item.song.alias[0]}})</span>
            </h3>
            <div>
              <span>SQ</span>
              <p v-for="(item1,idx1) in item.song.artists" :key="idx1">{{item1.name}}</p>
              <p>- {{item.song.album.name }}</p>
            </div>
          </div>
          <div class="songs-list-right">
            <i class="iconfont">&#xe696;</i>
          </div>
        </div>
      </div>
      <footer @click="toLogin()">
        <div class="bottom">
          <img class="imgWrap" src="~@/assets/images/fologo.png" />
          <span>高达音乐盒</span>
        </div>
        <p>打开APP，发现更多好音乐 ></p>
        <p class="copyright">高达公司版权所有©1997-2020 广州高达科技有限公司运营</p>
      </footer>
    </div>
  </div>
</template>

<script>
import Img from "@/assets/images/bg.png";

import { getReMusic, getPlayMusic, getNewMusic, getBanner } from "../assets/api";
export default {
  props: {
    img: Img
  },
  data() {
    return {
      //最新音乐数据
      songlist: null,
      active: 0, //默认轮播图显示第一页
      images: [],
      //处理后的6个歌单数据
      musicData: null,
      show:false
    };
  },
  computed: {
    //处理6个歌单的播放数量
    num() {
      let newData = this.musicData.map(function(item) {
        let num = 0;
        if (item.playCount > 100000000) {
          num = Number((item.playCount / 100000000).toFixed(1)) + "亿";
        } else if (item.playCount > 10000) {
          num = Number((item.playCount / 10000).toFixed(1)) + "万";
        } else {
          num = item.playCount;
        }
        return num;
      });
      return newData;
    }
  },
  async created() {   
    //拿取banner
    this.images = await getBanner();
    //获得歌单并处理得到前6个歌单
    let res = await getReMusic()
    this.musicData = res.slice(0,6);
    //拿取最新音乐列表
    this.songlist = await getNewMusic();

    this.show = true
  },
  methods: {
    //点击歌单后，获得相应id歌单的详细数据,并将所有数据存入vuex
    async toMusic(musicId) {
      let musicList = await getPlayMusic(musicId);
      this.$store.commit("toMusicList", musicList);
      this.$store.commit("getMusicList",this.musicData)
      //通过路由传入id参数
      this.$router.push({
        name: "playlist",
        query: {
          id: musicId
        }
      });
    },
    toLogin() {
      this.$router.push({
        name: "Down_load"
      });
    },
    arti(arr) {
      var a = [];
      arr.forEach(item => {
        a.push(item.name);
      });
      return a;
    },
    toplay(idx) {
       var b = [];
      this.songlist.forEach(item => {
        var songs = {
          id: item.id,
          name: item.name,
          artists: this.arti(item.song.artists),
          picurl: item.picUrl
        };
        b.push(songs);
      });
      this.$store.commit("toSongList", b);
      this.$store.commit("songsIdx", idx);
    },
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../assets/font/play/iconfont.css";
@import "../assets/scss/ReMusic.scss";
</style>



